<template>
	<view class="wui-selectionBox" @click="checkselectionBox">
		<view class="selectionBox-icon">
			<text v-if="icon" :class="[icon, isCheck ? 'active-icon' : 'default-icon']" class="custom-icon iconfont "
				:style="[
					iconSizeComputed,
					isCheck ? iconColorActiveComputed : iconColorDefaultComputed,
					isCheck ? backgroundActiveComputed : backgroundDefaultComputed
				]"></text>
			<text v-else :class="[isCheck ? 'active-icon' : 'default-icon']" class="iconfont icon-wui-success " :style="[
					iconSizeComputed,
					shapeComputed,
					isCheck ? iconColorActiveComputed : iconColorDefaultComputed,
					isCheck ? backgroundActiveComputed : backgroundDefaultComputed
				]"></text>
		</view>
		<slot></slot>
	</view>
</template>

<script>
	// 可以当做单选也可以多选
	export default {
		name: 'w-selectionBox',
		props: {
			value: {
				type: [String, Number, Boolean]
			},
			disabled: {
				type: Boolean,
				default: false
			},
			icon: {
				type: String
			},
			iconSize: {
				type: String,
				default: '26'
			},
			iconColorDefault: {
				type: String,
				default: 'transparent'
			},
			iconColorActive: {
				type: String,
				default: '#fff'
			},
			backgroundDefault: {
				type: String,
				default: '#fff'
			},
			backgroundActive: {
				type: String,
				default: '#00A231'
			},
			shape: {
				type: String,
				default: 'square'
			}
		},
		data() {
			return {
				currentValue: this.value,
				groupValue: null,
				groupValueArr: []
			};
		},
		watch: {
			value: {
				immediate: true,
				handler(value) {
					this.currentValue = value;
				}
			}
		},
		computed: {
			isCheck() {
				if (this.isParent) {
					if (this.groupValue === this.currentValue || this.groupValueArr.includes(this.currentValue)) {
						return true;
					}
					return false;
				} else {
					return this.currentValue;
				}
			},
			iconSizeComputed() {
				return {
					'--icon-size': uni.upx2px(this.iconSize) + 'px'
				};
			},
			iconColorDefaultComputed() {
				return {
					'--icon-color-default': this.iconColorDefault
				};
			},
			iconColorActiveComputed() {
				return {
					'--icon-color-active': this.iconColorActive
				};
			},
			backgroundDefaultComputed() {
				return {
					'--background-default': this.backgroundDefault
				};
			},
			backgroundActiveComputed() {
				return {
					'--background-active': this.backgroundActive
				};
			},
			shapeComputed() {
				switch (this.shape) {
					// 圆形
					case 'round':
						return {
							'--border-radius': '50%'
						};
						break;
						// 方形
					case 'square':
						return {
							'--border-radius': '0%'
						};
						break;
				}
			},
			// 判断是否有父组件
			isParent() {
				if (this.getparent()) return true;
				return false;
			}
		},
		methods: {
			getparent() {
				return this.$wuiUtils.queryParent.call(this, 'w-selectionBoxGroup');
			},
			checkselectionBox() {
				if (this.isParent) {
					let parentVaule = this.getparent().value;
					// 有group组件包裹
					if (parentVaule instanceof Array) {
						let cloneParentVaule = [].concat(parentVaule);
						let indexOf = cloneParentVaule.indexOf(this.currentValue);
						if (indexOf === -1) cloneParentVaule.push(this.currentValue);
						else cloneParentVaule.splice(indexOf, 1);
						this.getparent().changeValue(cloneParentVaule);
					} else {
						this.getparent().changeValue(this.currentValue);
					}
				} else {
					// 没有group组件包裹
					this.$emit('input', !this.currentValue);
				}
			},
			setGroupValue(groupValue) {
				this.groupValue = groupValue;
			},
			setGroupValueArr(groupValueArr) {
				this.groupValueArr = groupValueArr;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.wui-selectionBox {
		display: flex;
		align-items: center;
		margin: 0 10rpx;

		.iconfont {
			width: calc(var(--icon-size) * 1);
			height: calc(var(--icon-size) * 1);
			display: flex;
			justify-content: center;
			align-items: center;
			border: 1rpx solid #dedede;
			margin-right: 6rpx;
			font-size: var(--icon-size);
			border-radius: var(--border-radius);
		}

		.custom-icon {
			border-color: transparent;
		}

		.iconfont.default-icon {
			background-color: var(--background-default);
			color: var(--icon-color-default);
		}

		.iconfont.active-icon {
			color: var(--icon-color-active);
			background-color: var(--background-active);
			border-color: var(--background-active);
		}
	}
</style>
